<template>
  <div class="Trend">
    <!-- 下拉选择框 -->
    <div class="select-title">
      <span class="title">{{ title }}</span>
      <i class="bi bi-caret-down text-arrowsBottom" @click="showTilte"></i>
      <div v-for="data in DataType" :key="data.key" v-show="isShow" @click="chooseTitle(data.key, data.text)">
        {{ data.text }}
      </div>
    </div>
    <div class="trend-container">
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, Ref, ref } from 'vue';
import useEchartsData from '@/store/useEchartsData'
import * as echarts from 'echarts'
import { computed } from '@vue/reactivity';
import { Type } from '@/types/seller';
import throttleFn from '@/utils/throttle';
//图表数据仓库
const store = useEchartsData()

//控制下拉框是否显示
let isShow: Ref<boolean> = ref(false)

//显示的标题文字内容
let title: Ref<string> = ref('')

//选择显示数据的类型
let DataType: Ref<any> = ref([])
//类型的key
let typeKey: Ref<string> = ref('')
//图表容器
let mychart: any

onMounted(async () => {
  try {
    //请求图表数据
    await store.getTrendData()
  } catch (error) {
    console.log(error);
  }


  getOption()
  //监听窗口变化
  window.addEventListener('resize', throttleFn(resizeFn, 100))
})

//初始化echarts配置
const getOption = () => {
  //显示的数据
  const valueArr = store.TrendData[typeKey.value].data

  let nameArr = valueArr.map(item => {
    return item.name
  })
  //线的颜色
  let colorArr = ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00']
  let seriesArr = valueArr.map((item, index) => {
    return {
      name: item.name,
      type: 'line',
      stack: 'Total',
      //显示层级
      zlevel: 1,
      z: 1,
      smooth: true,
      lineStyle: {
        width: 2
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: colorArr[index]
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: item.data

    }
  })

  if (mychart) {
    mychart.dispose()
  }

  //图表实例
  mychart = echarts.init(document.querySelector('.trend-container') as HTMLElement, 'dark-blue')
  const option = {
    color: colorArr,

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        //交叉轴工具提示
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      top: '15%',
      left: 20,
      icon: 'circle',
      data: nameArr
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '35%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: seriesArr
  };


  mychart.setOption(option)
}

//选择显示标题
const showTilte = () => {
  isShow.value = !(isShow.value)
}

//选择标题
const chooseTitle = (key: string, value: string) => {
  title.value = value
  isShow.value = !isShow.value
  DataType.value = store.TrendData.type.filter((item: any) => {
    return item.text !== title.value
  })
  //修改key
  typeKey.value = key
  //获取新的图表配置
  getOption()
}

//自适应函数
const resizeFn = (e: Event) => {
  const header = document.querySelector('.select-title') as HTMLElement
  const container = document.querySelector('.trend-container') as HTMLElement
  header.style.fontSize = container.offsetWidth / 100 * 3.6 + 'px'
  mychart.resize()
}

//监听仓库数据变化
store.$subscribe((type, state) => {


  title.value = state.TrendData.type[0].text
  DataType.value = state.TrendData.type.filter((item: any) => {
    return item.text !== title.value
  })
  typeKey.value = state.TrendData.type[0].key
}, { deep: true })
</script>

<style lang="less" scoped>
.Trend {
  position: relative;
  height: 100%;
  width: 100%;

  .trend-container {
    height: 100%;
    width: 100%;
  }

  //下拉标题
  .select-title {
    position: absolute;
    top: 2%;
    left: 2%;
    z-index: 10;
    font-size: 25px;
    color: white;

    .text-arrowsBottom {
      font-size: 25px;
      color: white;
    }
  }
}
</style>